<template>
  <div
    class="test-detection-container animate__faster animate__animated animate__fadeIn"
  >
    <!-- 顶部条件筛选 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <AssociativeSelectGroup
            :map="selectMap"
            v-model="defaultTime"
            :activeDate="activeDate"
            @conditionChange="selectGroupChange($event)"
          >
            <template slot="space_0">
              <a-input
                placeholder="请输入报告编号"
                v-model="select.reportNum"
              />
            </template>
          </AssociativeSelectGroup>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="getTableData"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="detection-volatility-body">
      <div class="data-report-body">
        <div
          class="detection-menu"
          :class="{ 'animate-in': isOpen, 'animate-out': !isOpen }"
        >
          <div class="zhgd-data-report-header" header="试验项目"></div>
          <div class="menu-tree">
            <a-empty v-if="treeData.length == 0" />
            <a-tree
              v-else
              blockNode
              show-icon
              v-model="checkedKeys"
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :selected-keys="selectedKeys"
              :tree-data="treeData"
              :replaceFields="{
                children: 'children',
                title: 'trialName',
                key: 'trialNum',
              }"
              @expand="onExpand"
              @select="onSelect"
            >
              <template slot="custom" slot-scope="{ children }">
                <img
                  v-if="children && children.length > 0"
                  class="menu-icon"
                  src="https://jszhgd.cn/static/pc/folder.png"
                />
                <img
                  v-else
                  class="menu-icon"
                  src="https://jszhgd.cn/static/pc/file.png"
                />
              </template>
            </a-tree>
          </div>
          <img
            class="arrow"
            :src="
              isOpen
                ? 'https://jszhgd.cn/static/pc/trial/close.png'
                : 'https://jszhgd.cn/static/pc/trial/open.png'
            "
            alt=""
            @click="isOpen = !isOpen"
          />
        </div>
        <div class="detection-body" v-loading="loading">
          <!-- <div class="zhgd-data-report-header" header="试验检测"></div> -->
          <div class="menu-list">
            <vxe-table
              height="99%"
              class="scrollbarStyle"
              align="center"
              :data="tableData"
              :column-config="{ resizable: true }"
            >
              <vxe-column type="seq" width="80" title="序号"></vxe-column>
              <vxe-column
                field="reportNum"
                title="报告编号"
                min-width="150"
              ></vxe-column>
              <vxe-column
                field="otherLocation"
                title="梁号"
                min-width="150"
              ></vxe-column>
              <vxe-column
                field="precativeDate"
                title="下单时间"
                min-width="150"
              ></vxe-column>
              <vxe-column
                field="trialDate"
                title="检测时间"
                min-width="150"
              ></vxe-column>
              <vxe-column title="结果判定" min-width="150">
                <template slot-scope="scope">
                  <span class="res-color-3" v-if="scope.row.result == '-1'">
                    实测
                  </span>
                  <span class="res-color-1" v-if="scope.row.result == 0">
                    合格
                  </span>
                  <span class="res-color-2" v-if="scope.row.result == 1">
                    不合格
                  </span>
                  <span class="res-color-4" v-if="scope.row.result == 2">
                    试验数据无效
                  </span>
                </template>
              </vxe-column>
              <vxe-column
                field="operate"
                width="200"
                title="操作"
                fixed="right"
              >
                <template #default="{ row }">
                  <div class="text-button-group">
                    <a-button
                      type="text"
                      :disabled="row.trialDate ? false : true"
                      @click="report(row)"
                    >
                      查看报告
                    </a-button>
                    <a-button type="text" @click="detail(row)">查看</a-button>
                  </div>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
          <div>
            <vxe-pager
              background
              :current-page.sync="pager.page"
              :page-size.sync="pager.pageSize"
              :total="pager.total"
              :layouts="[
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'Sizes',
                'FullJump',
              ]"
              @page-change="paginationChange"
            >
              <template #left>
                <div class="vxe-pager-left-tip-container">
                  第<span>1</span>到<span
                    >{{ Math.ceil(pager.total / pager.pageSize) }}页 </span
                  >共<span>{{ pager.total }}</span
                  >条记录
                </div>
              </template>
            </vxe-pager>
          </div>
        </div>
      </div>
    </div>
    <!-- 查看页面 -->
    <detailPage
      :visible.sync="detailPage.visible"
      :trialId="detailPage.id"
      :trialNum="detailPage.trialNum"
    ></detailPage>
  </div>
</template>

<script>
const { assets_host } = require("@/environment/index.js");
import AssociativeSelectGroup from "@/components/wisdom-beam/trial-app/AssociativeSelectGroup";
import bjIcon from "@/components/bj-icon";
import { addAttributeByKey, kkFileView } from "@/utils";
//查看页面
import detailPage from "./views/detail.vue";
import {
  listByTenantCode,
  getCommissionList,
  getReportHasDataDate,
} from "@/api/wisdom-beam/trial-app";
import { getLoginData } from "@/tools/index";
import { host } from "@/environment";
export default {
  components: {
    AssociativeSelectGroup,
    bjIcon,
    detailPage,
  },
  data() {
    return {
      //详情页面
      detailPage: {
        trialNum: "",
        id: "",
        visible: false,
      },
      assets_host: assets_host,
      loading: false,
      activeDate: [],
      selectMap: [
        {
          type: "calendar",
        },
      ],
      defaultTime: [],
      select: {
        precativeNum: "",
        reportNum: "",
        sampleNum: "",
      },
      conditionsData: {},
      //树
      isOpen: true, //默认展开
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData: [],
      //表格
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      nodeId: "",
      treeItem: {},
    };
  },
  mounted() {
    this.getNodeTreeList();
  },
  methods: {
    selectGroupChange(data) {
      this.dealConditionsData(data);
      this.getTableData();
    },
    //处理搜索区域选中值
    dealConditionsData(data = {}) {
      Object.keys(data).forEach((key) => {
        if (!data[key]) {
          this.conditionsData[key] = "";
        } else if (Array.isArray(data[key])) {
          this.conditionsData[key] = data[key]
            .map((v) => v.key)
            .filter((v) => v)
            .toString();
        } else if (
          Object.prototype.toString.call(data[key]) === "[object Object]"
        ) {
          this.conditionsData[key] = data[key].key;
        } else {
          this.conditionsData[key] = "";
        }
      });
    },

    //查询有数据的日期列表
    getDateList() {
      let {
        conditionsData: { block, precativeOrgCode },
        select: { precativeNum, reportNum, sampleNum },
        trialNum,
        defaultTime,
      } = this;
      getReportHasDataDate({
        orgCode: block,
        precativeOrgCode,
        precativeNum,
        reportNum,
        sampleNum,
        startTime: defaultTime[0] || "",
        endTime: defaultTime[1] || "",
        trialNum,
      })
        .then((res) => {
          let { data } = res;
          this.activeDate = data.result || [];
        })
        .catch((_) => {
          this.activeDate = [];
        });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    //获取表格数据
    getTableData() {
      this.getDateList();
      this.loading = true;
      let { page, pageSize } = this.pager;
      let {
        conditionsData: { block, precativeOrgCode },
        select: { precativeNum, reportNum, sampleNum },
        trialNum,
        defaultTime,
      } = this;
      getCommissionList({
        orgCode: block,
        precativeOrgCode,
        precativeNum,
        reportNum,
        sampleNum,
        startTime: defaultTime[0] || "",
        endTime: defaultTime[1] || "",
        trialNum,
        page,
        pageSize,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.tableData = result.records || [];
          this.pager.total = result.total;
          this.loading = false;
        })
        .catch((_) => {
          this.tableData = [];
          this.loading = false;
        });
    },
    //获取根节点树数据
    getNodeTreeList() {
      listByTenantCode()
        .then((res) => {
          let filterData = addAttributeByKey(
            null,
            "scopedSlots",
            { icon: "custom" },
            res.data.result,
            "children"
          );
          let array = this.getFirstNode(filterData);
          this.nodeId = array[array.length - 1].id;
          this.treeItem = array[array.length - 1];
          this.expandedKeys = [this.nodeId];
          this.selectedKeys = [this.nodeId];
          this.trialNum = this.treeItem.trialNum;
          this.treeData = filterData;
        })
        .catch();
    },
    // 查找一个树多有第一个节点，深度遍历
    getFirstNode(tree) {
      var temp = [];
      var forFn = function (arr) {
        if (arr && arr.length > 0) {
          temp.push(arr[0]);
          if (arr[0].children) {
            forFn(arr[0].children);
          }
        }
      };
      forFn(tree);
      return temp;
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    //树选择事件
    onSelect(selectedKeys, { node }) {
      node.onExpand();
      this.selectedKeys = selectedKeys;
      this.trialNum = selectedKeys[0];
      this.getTableData();
    },
    //查看
    detail(row) {
      this.detailPage.id = row.id;
      this.detailPage.trialNum = row.trialNum;
      this.detailPage.visible = true;
    },
    //查看报告
    report(row) {
      let { NODE_ENV } = process.env;
      let { gateWaybaseUrl } = host;
      let { tenantCode } = getLoginData();
      let path = "";
      if (NODE_ENV == "prd") {
        path = gateWaybaseUrl;
      } else {
        path = "http:" + gateWaybaseUrl;
      }
      let url = `${path}/beamTrial/trial-report/downloadReport?tenantCode=${tenantCode}&reportId=${row.id}&fullfilename=${tenantCode}_${row.orgCode}_${row.reportNum}.pdf`;
      window.open(kkFileView(url));
    },
  },
};
</script>

<style lang="less" scoped>
.test-detection-container {
  padding: 0 0 10px 10px;
  height: 100%;
  .flex();
  flex-direction: column;
  .detection-volatility-body {
    flex: 1;
    height: 100%;
    overflow: hidden;
    margin: 10px 10px 0 0;
    .data-report-body {
      height: 100%;
      .flex();
      width: 100%;
      .detection-menu {
        background-color: #fff;
        box-sizing: border-box;
        height: 100%;
        width: 304px;
        min-width: 304px;
        padding: 0px 15px 20px;
        .flex();
        flex-direction: column;
        position: relative;
        transition: 0.8s;
        margin-right: 12px;

        .zhgd-data-report-header {
          padding: 12px 0;
          &::before {
            content: attr(header);
            height: 18px;
            display: flex;
            align-items: center;
            border-left: 3px solid var(--primary-color);
            padding-left: 10px;
            margin-bottom: 20px;
            font-size: 18px;
            font-weight: 400;
            color: #525a5d;
            position: relative;
            top: 10px;
          }
        }
        .menu-tree {
          height: 100%;
          flex: 1;
          .custom-scrollbar();
          overflow-x: hidden !important;
          .menu-icon {
            height: 16px;
            width: 16px;
            margin-right: 10px;
          }
        }

        /deep/ .ant-tree-node-content-wrapper {
          position: relative;
        }
        /deep/.ant-tree-title {
          & span:first-of-type {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: inline-block;
            width: 150px;
          }
        }

        .arrow {
          position: absolute;
          top: 50%;
          right: -8px;
          cursor: pointer;
        }
        &.animate-in {
          left: 0;
          width: 304px;
          min-width: 304px;
          padding: 0px 15px 20px;
        }
        &.animate-out {
          left: -12px;
          width: 0px;
          min-width: 0px;
          margin-right: 0;
          padding: 0 6px;
          /deep/.ant-tree li {
            padding-left: 12px;
          }
          .zhgd-data-report-header {
            &::before {
              padding-left: 20px;
            }
          }
        }
      }
      .detection-body {
        background-color: #fff;
        margin-left: 2px;
        height: 100%;
        overflow: hidden;
        flex: 1;
        .flex();
        flex-direction: column;
        z-index: 99;
        .zhgd-data-report-header {
          padding: 22px 0 22px 22px;
        }
        .menu-list {
          height: 100%;
          width: 100%;
        }
      }
    }
  }
}
//按钮
/deep/.vxe-table {
  .ant-btn {
    margin: 0 15px;
    color: var(--primary-color);
    position: relative;
    padding: 0;
    &::after {
      position: absolute;
      content: "";
      height: 14px;
      width: 1px;
      background: #dcdee2;
      right: -15px;
      top: 50%;
      transform: translateY(-50%);
    }
    &.del {
      color: var(--echart-pale-red);
    }
    &:last-child {
      &::after {
        display: none;
      }
    }
  }
}
.res-color-1 {
  color: #4bc964;
}
.res-color-2 {
  color: #ff3f4a;
}
.res-color-3 {
  color: #0098ff;
}
.res-color-4 {
  color: #aab0bc;
}
</style>
